<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <link rel="stylesheet" href="../../lib/layui/css/layui.css" />
    <link rel="stylesheet" href="../../css/common/default_style.css">
    <title>Document</title>
    <style>
        #main-div{
            padding-left: 40px;
            margin-top: 100px;
        }
        .form-field{
            margin-top: 50px;
        }
        img{
            width: 160px;
        }
    </style>
</head>
<body onload="loadData()">
    <div id="main-div" >
        <form id="main-form">
            <div class="form-field">
                <label for="avatar">头像上传：</label>
                <input type="button" class="my-button" onclick="$('#avatar').click()" value="点击上传"></input>
                <input type="file" id="avatar" name="avatar" accept="image/*" style="display: none">
                <input type="hidden" id="avatarUrl" name="avatarUrl"/>
                <img id="avatar-preview" src="#" alt="头像预览" style="display: none">
            </div>

            <div class="form-field">
                <label for="nickname">昵称：</label>
                <input type="text" id="nickname" name="nickname" placeholder="请输入昵称">
            </div>

            <div class="form-field">
                <label for="signature">个性签名：</label>
                <input type="text" id="signature" name="signature" placeholder="请输入个性签名">
            </div>

            <div class="form-field">
                <label for="gender">性别：</label>
                <select id="gender" name="gender">
                    <option value="男">男</option>
                    <option value="女">女</option>
                </select>
            </div>

            <div class="form-field">
                <label for="province">所在省：</label>
                <select id="province" name="provinceId" onchange="loadCity()">
                    <!-- 其他省份选项 -->
                </select>
            </div>

            <div class="form-field">
                <label for="city">所在城市：</label>
                <select id="city" name="cityId">
                    <!-- 根据选择的省份动态加载对应的城市选项 -->
                </select>
            </div>

            <button type="button" onclick="uploadAll()">提交</button>
        </form>
    </div>

    <script src="../../lib/jquery-3.7.0.js"></script>
    <script src="../../lib/layui/layui.js"></script>
    <script src="../../js/tools.js"></script>
    <script src="../../js/pages/user/edit.js"></script>

</body>
</html>